<script setup>
import {reactive, ref} from 'vue'
import {Switch,Image,Toast } from 'vant'
import router from '@/router'
const checkedList = reactive({
    DouYinRecoverChecked: false,
    DouYinRiverChecked: false,
    KuaiShouRecoverChecked: false,
    KuaiShouRiverChecked: false,
    xHongShuRecoverChecked: false,
    xHongShuRiverChecked: false,
    spHaoRecoverChecked: false,
    spHaoRiverChecked: false,
})
const isStart = ref(false)
const start = () => {
    const isMay = Object.values(checkedList).every(value => value === false);
    if(isMay)return Toast  ('请先勾选需要启动的模块')
    isStart.value = !isStart.value
    if(isStart.value){
        window.auto.execAjCode('toastLog("启动")')
        startNow()
    }else{
        window.auto.execAjCode('toastLog("停止")')
        stop()
    }
}

const startNow = () => {
      auto.invoke(
        'runRobotNow',
        [{ robot: require('@/auto/robot/robot.all'),...checkedList}],
        () => {

        },
      )
    }
const stop = () => {
      auto.invoke('robotStop', [], () => { })
}
const goInformation = () => {
    router.push('/information/clueInformation')
}
const goRiver = () => {
    router.push('/river')
}
const goLetter = () => {
    router.push('/letter')
}
const goClue = () => {
    router.push('/clue')
}
</script>

<template>
    <div class="page">
        <Image class="bgc" :src="require('../../assets/img/home_img_bgbanner.png')"/>
        <div class="middle">
            <div class="radius" @click="goClue">
                <Image :src="require('../../assets/img/icon_fwzq.png')" class="middle-img" />
                <p>范围线索抓取</p>
            </div>
            <div class="user" @click="goRiver">
                <Image :src="require('../../assets/img/icon_zhzq.png')" class="middle-img" />
                <p>账号线索抓取</p>
            </div>
        </div>

        <div class="recover" @click="goInformation">
            <div class="recover-top">
                线索信息
                <Image class="recover-top-img" :src="require('../../assets/img/all_icon_yjtou.png')"/>
            </div>
            <div class="recover-bottom">
                <p>根据线索信息，寻找有效客户</p>
            </div>
        </div>
        <div class="recover" style="margin-top: 0;" @click="goLetter">
            <div class="recover-top">
                私信话术
                <Image class="recover-top-img" :src="require('../../assets/img/all_icon_yjtou.png')"/>
            </div>
            <div class="recover-bottom1">
                <span>设置私信话术，自动给线索客户发私信</span>
            </div>
        </div>
        <!-- <div class="start" @click="start">{{isStart?'停止':'启动'}}</div> -->
    </div>
</template>

<style scoped>
    .page{
        position: relative;
        overflow: visible;
        padding-bottom: 0.1vw;
        box-sizing: border-box;
    }
    .bgc{
        display: block;
        width: 100%;
        height: 48vw;
    }
    .middle{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 4vw;
    }
    .radius{
        width: 45.33vw;
        height: 37.33vw;
        border-radius: 2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 4.27vw;
        color: rgb(48,49,51);
        background: linear-gradient(135deg,rgb(255,232,217) 0%, rgb(255,255,254) 100%);
        margin-right: 3vw;
    }
    .user{
        width: 45.33vw;
        height: 37.33vw;
        border-radius: 2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 4.27vw;
        color: rgb(48,49,51);
        background: linear-gradient(135deg,rgb(219,230,255) 0%, rgb(255,255,255) 100%);
    }
    .middle-img{
        width: 21vw;
        height: 21vw;
        margin-bottom: 1vw;

    }
        .step{
            position: absolute;
            top: 38vw;
            left: 50%;
            transform: translateX(-50%);
            width: 94vw;
            height: 19vw;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #fff;
            border-radius: 2vw;
            
        }
        .step-item{
                display: flex;
                align-items: center;
            }
            .step-img{
                    width: 7vw;
                    height: 7vw;
                    margin-right: 1vw;
                }
        .step-item-bg{
                    display: flex;
                    flex-direction: column;
                }
    .step-item-h5{
            font-size: 3.73vw;
            color: rgb(48,49,51);
            margin:0;
            margin-bottom: 5vw;
        }
        .step-item-p{
            color: rgb(144,147,153);
            font-size: 3.2vw;
            margin: 0;
        }
        .recover{
            width: 94vw;
            height: 24vw;
            padding: 4vw;
            border-radius: 2.13vw;
            /* background:linear-gradient(90deg,#ffe8d9 0%,#ffffff 100%); */
            background-color: #fff;
            margin: 0 auto;
            margin-top: 4vw;
            box-sizing: border-box;
            margin-bottom: 4vw;
            
            
        }
        .recover-top{
                display: flex;
                font-weight: 500;
                font-size: 4.27vw;
                color: rgb(48,49,51);
                margin-bottom: 3vw;
                
            }
            .recover-top-img{
                    width: 6vw;
                    height: 6vw;
                }
        .recover-bottom{
                display: flex;
                font-size: 3.73vw;
                color: rgb(144,147,153);
               
            }
        .recover-bottom1{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 3.73vw;
            color: rgb(144,147,153);
        }
        p{
            margin: 0;
            margin-right: 5vw;
        }
        .grid{
            margin: 0 3vw;
            margin-bottom: 7vw;
        }
        .grid-item{
                display: inline-block;
                width: 45.33vw;
                height: 40.53vw;
                background-color: #fff;
                padding: 4vw 3vw;
                box-sizing: border-box;
                border-radius: 3vw;
                margin: 0 3vw 3vw 0;
                text-align: center;
            }
        .switch-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4vw;
            font-size: 4vw;
            color: rgb(48,49,51);
            
        }
        .switch-box:last-child{
                margin: 0;
            }
    .start{
            width: 21vw;
            height: 21vw;
            background:linear-gradient(213deg,#409eff 0%,#40d2ff 100%);
            box-shadow: 0 0.5vw 4vw #5da8fc;
            color: #fff;
            font-size: 4.27vw;
            text-align: center;
            line-height: 21vw;
            border-radius: 50%;
            margin: 0 auto 17vw;
        }
        .grid-img{
            display: inline-block;
            width: 10vw;
            height: 10vw;
            margin:0 auto;
            margin-bottom: 4vw;
        }
        .grid-item:nth-child(2n){
            margin: 0;
        }
</style>